<template>
  <div class="main">
    <template v-if="address.length > 0">
      <div class="wrap back-lists" v-for="item in address" :key="item.id">
        <van-swipe-cell :right-width="rightWidth(item)" :id="item.id" :on-close="onClose">
          <AddressMid :address="item"/>
          <div class="status">
            <template v-if="item.return_status == '-2'">
              <span class="wait" >未缴纳押金</span>
            </template>
            <template v-else-if="item.return_status == '-1'">
              <span class="back" @click="handleReturn(item)">退还水桶</span>
            </template>
            <template v-else-if="item.return_status == '1'">
              <span class="wait">水桶退还中</span>
            </template>
            <template v-else-if="item.return_status == '0'">
              <span class="wait">押金退还中</span>
            </template>
            <template v-else>
              <span class="done">水桶已退还</span>
            </template>
          </div>
          <span slot="right">删除</span>
        </van-swipe-cell>
      </div>
    </template>
    <template v-else>
      <EmptyTips text="无记录" :image="NoTicketEmpty" mWidth="30" mHeight="30"/>
    </template>
  </div>
</template>

<script>
import api from "../../api";
import AddressMid from "@/components/address/AddressMid";
import EmptyTips from "@/components/common/EmptyTips";
import NoTicketEmpty from "../../assets/common/no-ticket-empty.png";

export default {
  title: "退还水桶",
  components: {
    AddressMid,
    EmptyTips
  },
  data() {
    return {
      NoTicketEmpty,
      uid: this.$store.state.uid,
      address: []
    };
  },
  computed: {},
  methods: {
    handleReturn(item) {
      this.$routerPush(
        this,
        `/pages/station/Index?addressId=${item.id}&type=return`
      );
    },
    onClose(clickPosition, instance) {
      let id = instance.$el.id;

      this.$dialog
        .confirm({
          message: "确定删除吗？"
        })
        .then(() => {
          console.log(instance.$el.id);
          api.address.delUserAddress(id, this.uid, res => {
            this.$toast(`删除成功`);
            setTimeout(() => {
              this.clearList();
              this.getBucketList();
            }, 1000);
          });
          instance.close();
        })
        .catch(() => {
          instance.close();
          console.log("关闭");
        });
    },
    clearList() {
      this.address = [];
    },
    rightWidth(item) {
      if (item.return_status == 2) {
        return 65;
      } else {
        return 0;
      }
    },
    getBucketList() {
      api.address.getUserAddressList(this.uid, res => {
        res.forEach(element => {
          if (element.money) {
            this.address.push(element);
          }
        });
      });
    }
  },
  mounted() {
    this.getBucketList();
  }
};
</script>

<style lang="less" scoped>
.main {
  padding: 4vw;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  .wrap {
    border-bottom: 1px solid #f9f9f9;
    width: 100%;
    .status {
      position: absolute;
      z-index: 999;
      right: 0;
      top: 5vw;
      span {
        padding: 2vw 4vw;
      }
      .back {
        background: #219df1;
        color: #fff;
        border-radius: 30px;
        padding: 2vw 4vw;
      }
      .wait {
        color: #ff483b;
      }
      .done {
      }
    }
  }
}
</style>